<!DOCTYPE html>
<!--
Copyright 2012 Mozilla Foundation

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

Adobe CMap resources are covered by their own copyright but the same license:

    Copyright 1990-2015 Adobe Systems Incorporated.

See https://github.com/adobe-type-tools/cmap-resources
-->
<html dir="ltr" mozdisallowselectionprint>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <meta name="google" content="notranslate" />
  <title>电子签章</title>

  <link rel="stylesheet" href="viewer.css" />

  <style>
    .modelBox {
      display: none;
      position: fixed;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 10000;
      background: #00000059;
    }

    #loading {
      display: none;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .el-button {
      color: #fff;
      background-color: #409eff;
      display: inline-block;
      line-height: 1;
      white-space: nowrap;
      cursor: pointer;
      border: 1px solid #409eff;
      -webkit-appearance: none;
      text-align: center;
      box-sizing: border-box;
      outline: none;
      margin: 0;
      transition: 0.1s;
      font-weight: 500;
      -moz-user-select: none;
      -webkit-user-select: none;
      -ms-user-select: none;
      padding: 12px 20px;
      font-size: 14px;
      border-radius: 4px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .el-button:hover {
      background: #66b1ff;
      border-color: #66b1ff;
      color: #fff;
    }
  </style>

  <!-- This snippet is used in production (included from viewer.html) -->
  <link rel="resource" type="application/l10n" href="locale/locale.properties" />
  <script src="../build/pdf.js"></script>

  <script src="viewer.js"></script>
</head>

<body tabindex="1">
  <div id="outerContainer">
    <div id="sidebarContainer">
      <div id="toolbarSidebar" style="display: none">
        <div id="toolbarSidebarLeft">
          <div class="splitToolbarButton toggled">
            <button id="viewThumbnail" class="toolbarButton toggled" title="Show Thumbnails" tabindex="2"
              data-l10n-id="thumbs">
              <span data-l10n-id="thumbs_label">Thumbnails</span>
            </button>
            <button id="viewOutline" class="toolbarButton"
              title="Show Document Outline (double-click to expand/collapse all items)" tabindex="3"
              data-l10n-id="document_outline">
              <span data-l10n-id="document_outline_label">Document Outline</span>
            </button>
            <button id="viewAttachments" class="toolbarButton" title="Show Attachments" tabindex="4"
              data-l10n-id="attachments">
              <span data-l10n-id="attachments_label">Attachments</span>
            </button>
            <button id="viewLayers" class="toolbarButton"
              title="Show Layers (double-click to reset all layers to the default state)" tabindex="5"
              data-l10n-id="layers">
              <span data-l10n-id="layers_label">Layers</span>
            </button>
          </div>
        </div>

        <div id="toolbarSidebarRight">
          <div id="outlineOptionsContainer" class="hidden">
            <div class="verticalToolbarSeparator"></div>

            <button id="currentOutlineItem" class="toolbarButton" disabled="disabled" title="Find Current Outline Item"
              tabindex="6" data-l10n-id="current_outline_item">
              <span data-l10n-id="current_outline_item_label">Current Outline Item</span>
            </button>
          </div>
        </div>
      </div>
      <div id="sidebarContent">
        <div id="thumbnailView"></div>
        <div id="outlineView" class="hidden"></div>
        <div id="attachmentsView" class="hidden"></div>
        <div id="layersView" class="hidden"></div>
      </div>
      <div id="sidebarResizer"></div>
    </div>
    <!-- sidebarContainer -->

    <div id="mainContainer">
      <div class="findbar hidden doorHanger" id="findbar">
        <div id="findbarInputContainer">
          <input id="findInput" class="toolbarField" title="Find" placeholder="Find in document…" tabindex="91"
            data-l10n-id="find_input" />
          <div class="splitToolbarButton">
            <button id="findPrevious" class="toolbarButton findPrevious"
              title="Find the previous occurrence of the phrase" tabindex="92" data-l10n-id="find_previous">
              <span data-l10n-id="find_previous_label">Previous</span>
            </button>
            <div class="splitToolbarButtonSeparator"></div>
            <button id="findNext" class="toolbarButton findNext" title="Find the next occurrence of the phrase"
              tabindex="93" data-l10n-id="find_next">
              <span data-l10n-id="find_next_label">Next</span>
            </button>
          </div>
        </div>

        <div id="findbarOptionsOneContainer">
          <input type="checkbox" id="findHighlightAll" class="toolbarField" tabindex="94" />
          <label for="findHighlightAll" class="toolbarLabel" data-l10n-id="find_highlight">Highlight all</label>
          <input type="checkbox" id="findMatchCase" class="toolbarField" tabindex="95" />
          <label for="findMatchCase" class="toolbarLabel" data-l10n-id="find_match_case_label">Match case</label>
        </div>
        <div id="findbarOptionsTwoContainer">
          <input type="checkbox" id="findEntireWord" class="toolbarField" tabindex="96" />
          <label for="findEntireWord" class="toolbarLabel" data-l10n-id="find_entire_word_label">Whole words</label>
          <span id="findResultsCount" class="toolbarLabel hidden"></span>
        </div>

        <div id="findbarMessageContainer">
          <span id="findMsg" class="toolbarLabel"></span>
        </div>
      </div>
      <!-- findbar -->

      <div id="secondaryToolbar" class="secondaryToolbar hidden doorHangerRight">
        <div id="secondaryToolbarButtonContainer">
          <button id="secondaryPresentationMode" class="secondaryToolbarButton presentationMode visibleLargeView"
            title="Switch to Presentation Mode" tabindex="51" data-l10n-id="presentation_mode">
            <span data-l10n-id="presentation_mode_label">Presentation Mode</span>
          </button>

          <button id="secondaryOpenFile" class="secondaryToolbarButton openFile visibleLargeView" title="Open File"
            tabindex="52" data-l10n-id="open_file">
            <span data-l10n-id="open_file_label">Open</span>
          </button>

          <button id="secondaryPrint" class="secondaryToolbarButton print visibleMediumView" title="Print" tabindex="53"
            data-l10n-id="print">
            <span data-l10n-id="print_label">Print</span>
          </button>

          <button id="secondaryDownload" class="secondaryToolbarButton download visibleMediumView" title="Download"
            tabindex="54" data-l10n-id="download">
            <span data-l10n-id="download_label">Download</span>
          </button>

          <a href="#" id="secondaryViewBookmark" class="secondaryToolbarButton bookmark visibleSmallView"
            title="Current view (copy or open in new window)" tabindex="55" data-l10n-id="bookmark">
            <span data-l10n-id="bookmark_label">Current View</span>
          </a>

          <div class="horizontalToolbarSeparator visibleLargeView"></div>

          <button id="firstPage" class="secondaryToolbarButton firstPage" title="Go to First Page" tabindex="56"
            data-l10n-id="first_page">
            <span data-l10n-id="first_page_label">Go to First Page</span>
          </button>
          <button id="lastPage" class="secondaryToolbarButton lastPage" title="Go to Last Page" tabindex="57"
            data-l10n-id="last_page">
            <span data-l10n-id="last_page_label">Go to Last Page</span>
          </button>

          <div class="horizontalToolbarSeparator"></div>

          <button id="pageRotateCw" class="secondaryToolbarButton rotateCw" title="Rotate Clockwise" tabindex="58"
            data-l10n-id="page_rotate_cw">
            <span data-l10n-id="page_rotate_cw_label">Rotate Clockwise</span>
          </button>
          <button id="pageRotateCcw" class="secondaryToolbarButton rotateCcw" title="Rotate Counterclockwise"
            tabindex="59" data-l10n-id="page_rotate_ccw">
            <span data-l10n-id="page_rotate_ccw_label">Rotate Counterclockwise</span>
          </button>

          <div class="horizontalToolbarSeparator"></div>

          <button id="cursorSelectTool" class="secondaryToolbarButton selectTool toggled"
            title="Enable Text Selection Tool" tabindex="60" data-l10n-id="cursor_text_select_tool">
            <span data-l10n-id="cursor_text_select_tool_label">Text Selection Tool</span>
          </button>
          <button id="cursorHandTool" class="secondaryToolbarButton handTool toggled" title="Enable Hand Tool"
            tabindex="61" data-l10n-id="cursor_hand_tool">
            <span data-l10n-id="cursor_hand_tool_label">Hand Tool</span>
          </button>

          <div class="horizontalToolbarSeparator"></div>

          <button id="scrollPage" class="secondaryToolbarButton scrollPage" title="Use Page Scrolling" tabindex="62"
            data-l10n-id="scroll_page">
            <span data-l10n-id="scroll_page_label">Page Scrolling</span>
          </button>
          <button id="scrollVertical" class="secondaryToolbarButton scrollVertical" title="Use Vertical Scrolling"
            tabindex="63" data-l10n-id="scroll_vertical">
            <span data-l10n-id="scroll_vertical_label">Vertical Scrolling</span>
          </button>
          <button id="scrollHorizontal" class="secondaryToolbarButton scrollHorizontal" title="Use Horizontal Scrolling"
            tabindex="64" data-l10n-id="scroll_horizontal">
            <span data-l10n-id="scroll_horizontal_label">Horizontal Scrolling</span>
          </button>
          <button id="scrollWrapped" class="secondaryToolbarButton scrollWrapped" title="Use Wrapped Scrolling"
            tabindex="65" data-l10n-id="scroll_wrapped">
            <span data-l10n-id="scroll_wrapped_label">Wrapped Scrolling</span>
          </button>

          <div class="horizontalToolbarSeparator"></div>

          <button id="spreadNone" class="secondaryToolbarButton spreadNone toggled" title="Do not join page spreads"
            tabindex="66" data-l10n-id="spread_none">
            <span data-l10n-id="spread_none_label">No Spreads</span>
          </button>
          <button id="spreadOdd" class="secondaryToolbarButton spreadOdd"
            title="Join page spreads starting with odd-numbered pages" tabindex="67" data-l10n-id="spread_odd">
            <span data-l10n-id="spread_odd_label">Odd Spreads</span>
          </button>
          <button id="spreadEven" class="secondaryToolbarButton spreadEven"
            title="Join page spreads starting with even-numbered pages" tabindex="68" data-l10n-id="spread_even">
            <span data-l10n-id="spread_even_label">Even Spreads</span>
          </button>

          <div class="horizontalToolbarSeparator"></div>

          <button id="documentProperties" class="secondaryToolbarButton documentProperties" title="Document Properties…"
            tabindex="69" data-l10n-id="document_properties">
            <span data-l10n-id="document_properties_label">Document Properties…</span>
          </button>
        </div>
      </div>
      <!-- secondaryToolbar -->

      <div class="toolbar">
        <div id="toolbarContainer">
          <div id="toolbarViewer">
            <div id="toolbarViewerLeft">
              <button id="sidebarToggle" class="toolbarButton" title="Toggle Sidebar" tabindex="11"
                data-l10n-id="toggle_sidebar" aria-expanded="false" aria-controls="sidebarContainer">
                <span data-l10n-id="toggle_sidebar_label">Toggle Sidebar</span>
              </button>
              <div class="toolbarButtonSpacer"></div>
              <button id="viewFind" class="toolbarButton" title="Find in Document" tabindex="12" data-l10n-id="findbar"
                aria-expanded="false" aria-controls="findbar">
                <span data-l10n-id="findbar_label">Find</span>
              </button>
              <div class="splitToolbarButton hiddenSmallView">
                <button class="toolbarButton pageUp" title="Previous Page" id="previous" tabindex="13"
                  data-l10n-id="previous">
                  <span data-l10n-id="previous_label">Previous</span>
                </button>
                <div class="splitToolbarButtonSeparator"></div>
                <button class="toolbarButton pageDown" title="Next Page" id="next" tabindex="14" data-l10n-id="next">
                  <span data-l10n-id="next_label">Next</span>
                </button>
              </div>
              <input type="number" id="pageNumber" class="toolbarField pageNumber" title="Page" value="1" size="4"
                min="1" tabindex="15" data-l10n-id="page" autocomplete="off" />
              <span id="numPages" class="toolbarLabel"></span>
            </div>
            <div id="toolbarViewerRight">
              <button style="display: none" id="presentationMode" class="toolbarButton presentationMode hiddenLargeView"
                title="Switch to Presentation Mode" tabindex="31" data-l10n-id="presentation_mode">
                <span data-l10n-id="presentation_mode_label">Presentation Mode</span>
              </button>

              <button style="display: none" id="openFile" class="toolbarButton openFile hiddenLargeView"
                title="Open File" tabindex="32" data-l10n-id="open_file">
                <span data-l10n-id="open_file_label">Open</span>
              </button>

              <button id="print" class="toolbarButton print hiddenMediumView" title="Print" tabindex="33"
                data-l10n-id="print">
                <span data-l10n-id="print_label">Print</span>
              </button>

              <button id="download" class="toolbarButton download hiddenMediumView" title="Download" tabindex="34"
                data-l10n-id="download">
                <span data-l10n-id="download_label">Download</span>
              </button>
              <a href="#" id="viewBookmark" class="toolbarButton bookmark hiddenSmallView"
                title="Current view (copy or open in new window)" tabindex="35" data-l10n-id="bookmark">
                <span data-l10n-id="bookmark_label">Current View</span>
              </a>

              <div style="display: none" class="verticalToolbarSeparator hiddenSmallView"></div>

              <button style="display: none" id="secondaryToolbarToggle" class="toolbarButton" title="Tools"
                tabindex="36" data-l10n-id="tools" aria-expanded="false" aria-controls="secondaryToolbar">
                <span data-l10n-id="tools_label">Tools</span>
              </button>
            </div>
            <div id="toolbarViewerMiddle">
              <div class="splitToolbarButton" style="display: none">
                <button id="zoomOut" class="toolbarButton zoomOut" title="Zoom Out" tabindex="21"
                  data-l10n-id="zoom_out">
                  <span data-l10n-id="zoom_out_label">Zoom Out</span>
                </button>
                <div class="splitToolbarButtonSeparator"></div>
                <button id="zoomIn" class="toolbarButton zoomIn" title="Zoom In" tabindex="22" data-l10n-id="zoom_in">
                  <span data-l10n-id="zoom_in_label">Zoom In</span>
                </button>
              </div>
              <span id="scaleSelectContainer" class="dropdownToolbarButton">
                <select id="scaleSelect" title="Zoom" tabindex="23" data-l10n-id="zoom">
                  <option style="display: none" id="pageAutoOption" title="" value="auto"
                    data-l10n-id="page_scale_auto">
                    Automatic Zoom
                  </option>
                  <option id="pageActualOption" title="" value="page-actual" selected="selected"
                    data-l10n-id="page_scale_actual">
                    Actual Size
                  </option>
                  <option style="display: none" id="pageFitOption" title="" value="page-fit"
                    data-l10n-id="page_scale_fit">
                    Page Fit
                  </option>
                  <option style="display: none" id="pageWidthOption" title="" value="page-width"
                    data-l10n-id="page_scale_width">
                    Page Width
                  </option>
                  <option id="customScaleOption" title="" value="custom" disabled="disabled" hidden="true"></option>
                  <option title="" value="0.5" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 50 }'>
                    50%
                  </option>
                  <option title="" value="0.75" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 75 }'>
                    75%
                  </option>
                  <option title="" value="1" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 100 }'>
                    100%
                  </option>
                  <option title="" value="1.25" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 125 }'>
                    125%
                  </option>
                  <option title="" value="1.5" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 150 }'>
                    150%
                  </option>
                  <option title="" value="2" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 200 }'>
                    200%
                  </option>
                  <option title="" value="3" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 300 }'>
                    300%
                  </option>
                  <option title="" value="4" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 400 }'>
                    400%
                  </option>
                </select>
              </span>
            </div>
          </div>
          <div id="loadingBar">
            <div class="progress">
              <div class="glimmer"></div>
            </div>
          </div>
        </div>
      </div>

      <div id="viewerContainer" tabindex="0">
        <!-- 上传按钮 -->
        <button id="uploadBtn" type="button" class="el-button" onclick="uploadFile()">
          <svg t="1641635775606" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="5282" width="36" height="36">
            <path
              d="M273.874414 870.358013v21.95314c0 36.368635 29.560762 65.849422 66.019369 65.849422H890.081849c36.458607 0 66.019369-29.480787 66.019369-65.849422V342.27304H703.010309V67.908779H339.893783c-36.468604 0-66.019369 29.480787-66.019369 65.849422v285.330834h-66.019369V89.861918c0-48.484848 39.407685-87.792565 88.03249-87.792565h497.684474c228.558575 262.018119 228.558575 262.018119 228.558575 293.198376V936.207435c0 23.282724-9.277101 45.615745-25.781943 62.0806-16.504842 16.464855-38.897844 25.711965-62.24055 25.711965H295.877538c-23.342705 0-45.735708-9.237113-62.250546-25.711965a87.695595 87.695595 0 0 1-25.781944-62.0806v-65.849422h66.029366z m666.341768-593.934395L769.029678 73.187129v203.236489h171.186504zM31.790066 475.281475h792.262418v351.180256H31.790066V475.281475z m110.035613 285.800687h44.536083v-82.964074h29.040925c20.163699 0 35.538894-1.049672 46.185567-3.159013 7.817557-1.699469 15.515152-5.168385 23.082786-10.426741 7.577632-5.24836 13.825679-12.486098 18.744143-21.683224 4.908466-9.207123 7.377694-20.563574 7.377694-34.059357 0-17.50453-4.268666-31.790066-12.796001-42.836613-8.517338-11.046548-19.10403-18.224305-31.730084-21.523274-8.227429-2.199313-25.881912-3.298969-52.963449-3.298969h-71.45767v219.951265z m428.306155 0h44.536082v-93.480787h92.071228V630.402999h-92.081225v-52.073727h106.65667V541.130897H570.121837l0.009997 219.951265zM347.171509 541.130897v219.951265h83.793814c16.454858 0 29.60075-1.549516 39.417682-4.648548 13.145892-4.198688 23.572634-10.056857 31.300219-17.564511 10.236801-9.896907 18.104342-22.842862 23.622618-38.84786 4.508591-13.115901 6.767885-28.711028 6.767885-46.825367 0-20.603561-2.409247-37.938144-7.217744-51.973758-4.818494-14.055608-11.846298-25.931896-21.063418-35.638863a73.816932 73.816932 0 0 0-33.259607-20.263667c-9.626992-2.799125-23.612621-4.198688-41.966885-4.198688h-81.394564z m-160.819744 37.208372h21.513277c16.044986 0 26.731646 0.499844 32.039988 1.499531a30.741393 30.741393 0 0 1 17.904405 9.756951c4.708529 5.198376 7.077788 11.806311 7.077788 19.803812 0 6.487973-1.679475 12.206186-5.038426 17.094658a29.266854 29.266854 0 0 1-13.925648 10.816619c-5.918151 2.299281-17.644486 3.448922-35.208997 3.448923h-24.362387v-62.420494z m205.355826 0h20.003749c18.154327 0 30.340519 0.699781 36.568573 2.109341 8.317401 1.799438 15.185255 5.24836 20.603561 10.346766 5.418307 5.108404 9.626992 12.206186 12.636051 21.31334 3.019057 9.107154 4.508591 22.153077 4.508591 39.157763 0 17.014683-1.499531 30.43049-4.508591 40.28741-2.999063 9.85692-6.897844 16.934708-11.666354 21.243362-4.748516 4.298657-10.746642 7.357701-17.964386 9.147141-5.528272 1.389566-14.49547 2.089347-26.941581 2.089347h-33.229616V578.339269h-0.009997z m0 0"
              p-id="5283" fill="#ffffff"></path>
          </svg>
          <span style="vertical-align: super; font-size: 26px; margin: 0 6px">上传PDF文件</span>
        </button>

        <!-- 视图容器 -->
        <div id="viewer" class="pdfViewer"></div>
      </div>

      <div id="errorWrapper" hidden="true">
        <div id="errorMessageLeft">
          <span id="errorMessage"></span>
          <button id="errorShowMore" data-l10n-id="error_more_info">
            More Information
          </button>
          <button id="errorShowLess" data-l10n-id="error_less_info" hidden="true">
            Less Information
          </button>
        </div>
        <div id="errorMessageRight">
          <button id="errorClose" data-l10n-id="error_close">Close</button>
        </div>
        <div class="clearBoth"></div>
        <textarea id="errorMoreInfo" hidden="true" readonly="readonly"></textarea>
      </div>
    </div>
    <!-- mainContainer -->

    <div id="overlayContainer" class="hidden">
      <div id="passwordOverlay" class="container hidden">
        <div class="dialog">
          <div class="row">
            <p id="passwordText" data-l10n-id="password_label">
              Enter the password to open this PDF file:
            </p>
          </div>
          <div class="row">
            <input type="password" id="password" class="toolbarField" />
          </div>
          <div class="buttonRow">
            <button id="passwordCancel" class="overlayButton">
              <span data-l10n-id="password_cancel">Cancel</span>
            </button>
            <button id="passwordSubmit" class="overlayButton">
              <span data-l10n-id="password_ok">OK</span>
            </button>
          </div>
        </div>
      </div>
      <div id="documentPropertiesOverlay" class="container hidden">
        <div class="dialog">
          <div class="row">
            <span data-l10n-id="document_properties_file_name">File name:</span>
            <p id="fileNameField">-</p>
          </div>
          <div class="row">
            <span data-l10n-id="document_properties_file_size">File size:</span>
            <p id="fileSizeField">-</p>
          </div>
          <div class="separator"></div>
          <div class="row">
            <span data-l10n-id="document_properties_title">Title:</span>
            <p id="titleField">-</p>
          </div>
          <div class="row">
            <span data-l10n-id="document_properties_author">Author:</span>
            <p id="authorField">-</p>
          </div>
          <div class="row">
            <span data-l10n-id="document_properties_subject">Subject:</span>
            <p id="subjectField">-</p>
          </div>
          <div class="row">
            <span data-l10n-id="document_properties_keywords">Keywords:</span>
            <p id="keywordsField">-</p>
          </div>
          <div class="row">
            <span data-l10n-id="document_properties_creation_date">Creation Date:</span>
            <p id="creationDateField">-</p>
          </div>
          <div class="row">
            <span data-l10n-id="document_properties_modification_date">Modification Date:</span>
            <p id="modificationDateField">-</p>
          </div>
          <div class="row">
            <span data-l10n-id="document_properties_creator">Creator:</span>
            <p id="creatorField">-</p>
          </div>
          <div class="separator"></div>
          <div class="row">
            <span data-l10n-id="document_properties_producer">PDF Producer:</span>
            <p id="producerField">-</p>
          </div>
          <div class="row">
            <span data-l10n-id="document_properties_version">PDF Version:</span>
            <p id="versionField">-</p>
          </div>
          <div class="row">
            <span data-l10n-id="document_properties_page_count">Page Count:</span>
            <p id="pageCountField">-</p>
          </div>
          <div class="row">
            <span data-l10n-id="document_properties_page_size">Page Size:</span>
            <p id="pageSizeField">-</p>
          </div>
          <div class="separator"></div>
          <div class="row">
            <span data-l10n-id="document_properties_linearized">Fast Web View:</span>
            <p id="linearizedField">-</p>
          </div>
          <div class="buttonRow">
            <button id="documentPropertiesClose" class="overlayButton">
              <span data-l10n-id="document_properties_close">Close</span>
            </button>
          </div>
        </div>
      </div>
      <div id="printServiceOverlay" class="container hidden">
        <div class="dialog">
          <div class="row">
            <span data-l10n-id="print_progress_message">Preparing document for printing…</span>
          </div>
          <div class="row">
            <progress value="0" max="100"></progress>
            <span data-l10n-id="print_progress_percent" data-l10n-args='{ "progress": 0 }'
              class="relative-progress">0%</span>
          </div>
          <div class="buttonRow">
            <button id="printCancel" class="overlayButton">
              <span data-l10n-id="print_progress_close">Cancel</span>
            </button>
          </div>
        </div>
      </div>
    </div>
    <!-- overlayContainer -->
  </div>
  <!-- outerContainer -->
  <div id="printContainer"></div>
  <!-- 自定义模态框 -->
  <div id="dialog" class="modelBox">
    <!-- 关闭按钮 -->
    <div id="closeBtn" style="display: none; float: right; margin: 30px; cursor: pointer" onclick="loading(false)">
      <svg t="1641608906179" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
        p-id="3349" width="30" height="30">
        <path
          d="M576 512l277.333333 277.333333-64 64-277.333333-277.333333L234.666667 853.333333 170.666667 789.333333l277.333333-277.333333L170.666667 234.666667 234.666667 170.666667l277.333333 277.333333L789.333333 170.666667 853.333333 234.666667 576 512z"
          fill="#ffffff" p-id="3350"></path>
      </svg>
    </div>
    <!-- 加载框 -->
    <div id="loading" style="
          background: #000000ad;
          padding: 4px 16px 0px 8px;
          border-radius: 8px;
        ">
      <!-- loading svg -->
      <svg id="svg-loading" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30px"
        height="30px" viewBox="0 0 50 50" style="enable-background: new 0 0 50 50" xml:space="preserve">
        <path fill="#409eff"
          d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z"
          transform="rotate(275.098 25 25)">
          <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25"
            dur="0.8s" repeatCount="indefinite"></animateTransform>
        </path>
      </svg>
      <!-- error svg -->
      <svg id="svg-error" style="display: none" t="1641608475551" class="icon" viewBox="0 0 1024 1024" version="1.1"
        xmlns="http://www.w3.org/2000/svg" p-id="2152" width="30" height="30">
        <path
          d="M512 992C246.912 992 32 777.088 32 512 32 246.912 246.912 32 512 32c265.088 0 480 214.912 480 480 0 265.088-214.912 480-480 480z m0-64c229.76 0 416-186.24 416-416S741.76 96 512 96 96 282.24 96 512s186.24 416 416 416z"
          p-id="2153" fill="#ff4747"></path>
        <path
          d="M572.512 512l161.696 161.664-60.544 60.544L512 572.48l-161.664 161.696-60.544-60.544L451.52 512 288 348.512 348.512 288 512 451.488 675.488 288 736 348.512 572.512 512z"
          p-id="2154" fill="#ff4747"></path>
      </svg>
      <!-- 文字提示 -->
      <span id="loadingTip" style="
            line-height: 30px;
            vertical-align: top;
            color: #71b2ff;
            font-size: 14px;
          ">上传文件</span>
    </div>
  </div>
</body>
<!-- 电子签章所需js -->
<script src="./js/secCtrl.js"></script>
<script src="./js/xjl.js"></script>
<script src="./js/jquery.min.js"></script>
<script>
  const baseUrl = localStorage.getItem('baseUrl') || "http://123.6.56.160:23886/api";
  const preview = localStorage.getItem('previewUrl') || "http://123.6.56.160:8848";
  const appToken = sessionStorage.getItem('token') || '';
  const token =
    "eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ7XCJjbGllbnRDYXRlZ29yeVwiOlwiZGVmYXVsdFwiLFwiY2xpZW50SWRcIjpcImRlZmF1bHRcIixcImxvZ2luVGltZVwiOjE2NDE2Mjc3ODAzMjEsXCJyb2xlXCI6XCJhZG1pblwiLFwic2VydmVySWRcIjpcIjQwRTIzMDc3MTcwNy1DMzE4RkY0RTNCNzM0MTlEQjZGMEQ2N0VENTQ3RjE0RlwiLFwidXNJZFwiOjIsXCJ1c2VyTmFtZVwiOlwi5rWL6K-V6LSm5oi3MVwifSIsImlzcyI6ImF1dGgwIiwiZXhwIjoxNjUyMjMyNTgwLCJpYXQiOjE2NDE2Mjc3ODB9.XH42xOxc0O_dpCXaVq-0Hy1uhPE540D3BWMWPDGtzlA";

  const signIp = '59.207.66.234'
  const signatureToken = '7c8d509e7e014d6d813ac2eeec912a23'
  let { search } = location;
  let query = getSearchQuery();
  let fileName = "";

  // 获取地址栏参数
  function getSearchQuery() {
    var url = window.location.href;
    var urlarray = url.split("?")[1].split("&");
    var values = new Array();
    for (var i = 0; i < urlarray.length; i++) {
      values[i] = urlarray[i].split("=")[1];//实现values[0]="1";values[1]="2";values[2]="3";
    }
    let obj = {};
    urlarray.forEach(item => {
      let arr = item.split('=');
      obj[arr[0]] = arr[1];
    })
    return obj
  }

  // 存在文件则执行后续操作
  if (query.taskId && query.instanceId) {
    // 隐藏上传文件按钮
    $("#uploadBtn").css("display", "none");
    // 获取PDF文件base格式
    let fileBase = null;
    getPDFbase64(`${baseUrl}/workflow/task/base64/sign/pdf?taskId=${query.taskId}&instanceId=${query.instanceId}`).then(
      (res) => {
        console.log("获取文件Base成功...");
        let { base64, filePath } = JSON.parse(res);
        fileName = filePath.split("/")[filePath.split("/").length - 1];
        fileBase = base64;
        // 开始加载
        startLoad();
      }
    );

    // 签章基础属性
    init("XACA", "", "");
    let se = KS_GetZWFWSealLists();
    let cerString = KS_GetCerts(2);
    let imageDataStr = KS_GetZWFWSeals(se);
    // 签章图片base
    let imageData = KS_GetInfoFromZWFWSeals(imageDataStr, 1);
    // 页面缩放比例
    let scale = initScale();
    // 文档缩放比例
    let s = 72 / 96;
    // 签章宽
    let w = 200 * s;
    // 签章高
    let h = 200 * s;
    // 签章图片宽
    let imgWidth = (w / s) * scale;
    // 签章图片高
    let imgHeight = (h / s) * scale;
    // 获取签章图片
    let signImg = createSignature(imageData);

    // 配置页面缩放比例
    function initScale() {
      let history = localStorage.getItem("pdfjs.history");
      if (!history) return 1;
      let {
        files: [{ zoom }],
      } = JSON.parse(history);
      let scale = zoom == "page-actual" ? 100 : zoom;
      return scale / 100;
    }

    // 每100ms轮询是否加载出pdf页面
    function startLoad(params) {
      console.log('startLoad')
      const timer = setInterval(() => {
        if (PDFViewerApplication.pdfDocument !== null) {
          clearInterval(timer);
          console.info("PDF文件加载成功...");
          setting(); // 设置页面事件
          $("#next").click(setting);
          $("#previous").click(setting);
          $("#pageNumber").change(setting);
          $("#scaleSelect").change(setting);
          $("#thumbnailView").click(setting);
          $("#scrollPage").click(); //默认单页切换
          createSignature(imageData);
        }
      }, 100);

      // 切换缩放比例回调
      $("#scaleSelect")[0].addEventListener("change", function () {
        let number = isNaN(this.value) ? 1 : this.value;
        // 重新设置签章图片大小比例
        scale = parseFloat(number);
        imgWidth = (w / s) * scale;
        imgHeight = (h / s) * scale;
        signImg = createSignature(imageData);
      });
    }

    // 给页面添加遮罩设置点击事件获取页数、x轴、y轴
    function setting() {
      const pdf = document.getElementById("viewer");
      const page = pdf.getElementsByClassName("page")[0];
      if (!page) return alert("未获取到页面信息，请刷新");
      page.style.overflow = "hidden";
      page.style.cursor = "crosshair";
      // 设置签章跟随鼠标
      setSignature(page);
      // 设置遮罩点击事件
      setMaskClick(page);
      // 检查是否设置上了点击事件，没有则重新设置
      checkedEvent(page);
    }

    // 检查是否设置了签章事件
    function checkedEvent(page) {
      page.addEventListener(
        "click",
        function (e) {
          let { path } = e;
          let isExist = [].find.call(path, (i) => i.className == "mask");
          if (isExist) return;
          alert("操作失败,请重新设置");
          // 设置签章跟随鼠标
          setSignature(page);
          // 设置遮罩点击事件
          setMaskClick(page);
        },
        false
      );
    }

    // 创建遮罩
    function createMask(p) {
      let div = document.createElement("div");
      let extraCss = "position:absolute;top:0;z-index:1";
      div.className = "mask";
      div.style.cssText = p.style.cssText + extraCss;
      return div;
    }

    // 创建签章图片
    function createSignature(imgData) {
      if (!imgData) return false;
      let img = document.createElement("img");
      img.width = imgWidth;
      img.height = imgHeight;
      img.style.cssText = "position:absolute;opacity:.9";
      img.src = "data:image/png;base64," + imgData;
      return img;
    }

    // 签章跟随鼠标
    function setSignature(page) {
      //创建签章
      if (!signImg) return alert("未获取到签章结构体数据信息");
      //初始化
      page.appendChild(signImg);
      page.addEventListener("mouseenter", function () {
        signImg.style.display = "block";
      });
      page.addEventListener("mousemove", function (e) {
        if (signImg.style.display == "none") {
          signImg.style.display = "block";
        }
        const x = e.offsetX;
        const y = e.offsetY;
        if (x < 0 || y < 0) return;
        signImg.style.left = x - imgWidth / 2 + "px";
        signImg.style.top = y - imgHeight / 2 + "px";
      });
    }

    // 遮罩添加点击事件
    function setMaskClick(page) {
      let strRange = page.getAttribute("data-page-number"); // 页数
      let mask = createMask(page);
      page.appendChild(mask);
      mask.addEventListener("click", function (e) {
        // 如果没有签章则点击时再次提示
        if (!signImg) return alert("未获取到签章结构体数据信息");
        console.log(`N:${strRange} X:${e.offsetX} Y:${e.offsetY} S:${scale}`);
        let x = ((e.offsetX - imgWidth / 2) * s) / scale;
        let y = ((e.offsetY - imgHeight / 2) * s) / scale;
        // 确认签章
        let isConfirm = confirm("确认签章？");
        if (isConfirm) {
          loading(true);
          let params = {
            fileBaseList: [
              {
                fileName,
                fileBase,
              },
            ],
            imageData: "", // 国办不填
            cerString: "", // 国办不填
            strRange,
            x,
            y,
            w,
            h,
            firstPer: 0.5,
            signFlag: "GM_SM2_SEAL",
            type: 1,
            imageDataStr,
            stext: "", // 不填
          };
          console.log("接口一参数", params);
          ajax(
            "http://" + signIp + ":8177/signSeal/subImgToHash",
            params
          ).then((res) => {
            console.log("接口一返回数据", res);
            if (res.state == "fail") return tip(res.message, true);
            tip("设置签章位置、页码");
            let { dataArr } = res;
            let data = {
              dataArr: [
                {
                  annot: dataArr[0].annot,
                  hashDataStr: dataArr[0].hashDataStr,
                  p1Sign: dataArr[0].signValue,
                  createName: dataArr[0].createName,
                  signType: 2,
                  imageDataStr,
                  timeStr: dataArr[0].timeStr,
                },
              ],
            };
            console.log("接口二参数", data);
            ajax("http://" + signIp + ":8177/signSeal/signMerge", data).then(
              (ret) => {
                console.log("接口二返回数据", ret);
                if (ret.status == "fail") return tip(res.message, true);
                tip("合成签章");
                // 处理文件名
                let fn = ret.dataArr[0].fileName;
                let splitArr = fn.split(".").shift().split("_");
                let filename = "";
                let suffix = ".pdf";
                if (splitArr.length == 2) {
                  filename = splitArr[0] + "_1" + suffix;
                } else {
                  let num = parseInt(splitArr[1]) + 1;
                  filename = splitArr[0] + "_" + num + suffix;
                }

                const base64Data = ret.dataArr[0].baseFile;
                const params = new URLSearchParams();
                params.append('base64', base64Data);
                params.append('path', 'sign');
                params.append('header', 'data:application/pdf');
                params.append('fileType', 'pdf');
                $.ajax({
                  type: "post",
                  url: baseUrl + "/sys/file/base64/file",
                  headers: { token: appToken },
                  data: params,
                  processData: false,
                  contentType: 'application/x-www-form-urlencoded',
                  success: function (data) {
                    $.ajax({
                      type: "post",
                      url: baseUrl + "/workflow/signature",
                      headers: { token: appToken, Accept: 'application/json', 'Content-Type': 'application/json' },
                      data: JSON.stringify({
                        instanceId: query.instanceId,
                        taskId: query.taskId,
                        signFilePath: data.value
                      }),
                      processData: false,
                      // contentType: 'application/x-www-form-urlencoded;charset=utf-8',
                      success: function (data) {
                        // 关闭加载框
                        loading(false);
                        tip("签章完成");
                        localStorage.setItem('SIGN_OVER', JSON.stringify(query));
                        window.close();
                      },
                      error: function ({ statusText }) {
                        tip(statusText, true);
                      },
                    });
                  },
                  error: function ({ statusText }) {
                    tip(statusText, true);
                  },
                });
              }
            );
          });
        }
      });
    }
  }

  // 加载框
  function loading(statue) {
    let isOpen = statue ? "block" : "none";
    $("#loading").css("display", isOpen);
    $("#dialog").css("display", isOpen);
    $("#closeBtn").css("display", "none");
    // 初始化
    $("#svg-loading").css("display", "inline");
    $("#svg-error").css("display", "none");
    $("#loadingTip").text("上传文件");
  }

  // 加载中的提示
  function tip(msg, isErr) {
    if (isErr) {
      $("#svg-loading").css("display", "none");
      $("#svg-error").css("display", "inline");
      $("#loadingTip").css("color", "#ff4747");
      $("#loadingTip").text("错误：" + msg);
      $("#closeBtn").css("display", "block");
    } else {
      $("#loadingTip").text(msg);
    }
  }

  // ajax请求
  async function ajax(url, params) {
    return await new Promise((resolve, reject) => {
      $.ajax({
        type: "post",
        url,
        headers: {
          token: signatureToken, // 签名token
        },
        data: JSON.stringify(params),
        dataType: "json",
        contentType: "application/json",
        success: function (data) {
          resolve(data);
        },
        error: function (err) {
          reject(err);
        },
      });
    });
  }

  // 获取PDF文件的Base64数据
  async function getPDFbase64(url) {
    return await new Promise((resolve, reject) => {
      const xml = new XMLHttpRequest();
      xml.open("GET", url);
      xml.setRequestHeader('token', appToken);
      xml.onreadystatechange = function () {
        if (xml.readyState == 4 && xml.status == 200) {
          resolve(xml.response);
        }
      };
      xml.send();
    });
  }

  function dataURLtoBlob(dataurl) {
    var arr = dataurl.split(',');
    var mime = arr[0].match(/:(.*?);/)[1];
    var bstr = atob(arr[1]);
    var n = bstr.length;
    var u8arr = new Uint8Array(n);
    while (n--) {
      u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], { type: mime });
  }

  function blobToFile(blob, fileName) {
    blob.lastModifiedDate = new Date();
    blob.name = fileName;
    return blob;
  }

  function dataURLtoFile(dataurl, filename) {
    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
      bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while (n--) {
      u8arr[n] = bstr.charCodeAt(n);
    }
    var blob = dataURLtoBlob(dataurl);
    return blobToFile(blob, filename);
  }

  // 上传文件
  function uploadFile() {
    let file = document.createElement("input");
    file.type = "file";
    file.addEventListener("change", function () {
      var file = this.files[0];
      // validate file type
      if (file.type !== "application/pdf") return alert("请上传PDF文件");
      // set file
      var formdata = new FormData();
      formdata.append("file", file);
      // upload
      var xhr = new XMLHttpRequest();
      xhr.open("post", baseUrl + "/sys/file/upload");
      xhr.setRequestHeader("token", token);
      xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
          loading(false);
          let { value } = JSON.parse(xhr.responseText);
          skip(value);
        }
      };
      xhr.upload.onprogress = function (event) {
        if (event.lengthComputable) {
          var percent = (event.loaded / event.total) * 100;
          loading(true);
          tip("上传中：" + parseInt(percent) + "%");
        }
      };
      xhr.send(formdata);
    });
    // emit event
    file.click();
  }

  // 跳转页面
  const { origin, pathname } = location;
  function skip(v) {
    location.href = origin + pathname + "?file=" + preview + v;
  }
</script>

</html>
